Vue.component('datatables-view',{
    props:{tableinfo:{}},
    template:[
        '<table id="datatable" class="table table-striped table-hover">',
        '   <thead>',
        '       <tr >',
        '           <th v-for="column in tableinfo.columns">{{column.name}}</th>',
        '       </tr>',
        '   </thead>',
        '   <tbody>',
        '       <tr v-for="row in tableinfo.dataRow">',
        '           <td v-for="column in tableinfo.columns">{{row[column.code]}}</td>',
        '       </tr>',
        '   </tbody>',
        '</table>'
    ].join('')
});

var tabledata = {
    columns:[
        {'name':'Rendering engine','code':'column1'},
        {'name':'Browser','code':'column2'},
        {'name':'Platform','code':'column3'},
        {'name':'Engine version','code':'column4'},
        {'name':'CSS grade','code':'column5'}
        ],
    dataRow:[
        {'column1':'1111111','column2':'2222222','column3':'3333333','column4':'4444444','column5':'5555555'},
        {'column1':'1111111','column2':'2222222','column3':'3333333','column4':'4444444','column5':'5555555'},
        {'column1':'1111111','column2':'2222222','column3':'3333333','column4':'4444444','column5':'5555555'},
        {'column1':'1111111','column2':'2222222','column3':'3333333','column4':'4444444','column5':'5555555'},
        {'column1':'1111111','column2':'2222222','column3':'3333333','column4':'4444444','column5':'5555555'}
        ]
};